<template>
	<view class="content">
		<view class="back" @click="goback">
			<image src="../../static/9.png"></image>
			<view>返回</view>
		</view>

		<view class="topCon">
			<view class="con">
				<image class="headImg" @click="chooseAndUploadImage" :src="userInfo.img"></image>
				<view class="li">
					<view class="lable">市场地区</view>
					<picker class="picker-box" mode="selector" :range="diquList" range-key="mingcheng"
						@change="diquPickerChange" :value="value">
						<view class="picker">
							<view>{{ !userInfo.diqu ? '下拉选择' : userInfo.diqu}}</view>

						</view>
					</picker>
					<image class="icon" src="../../static/2.png"></image>
				</view>
				<view class="li">
					<view class="lable">公司名</view>
					<input type="text" v-model="userInfo.gongsiming" placeholder="请输入公司名" />
				</view>
				<view class="li">
					<view class="lable">身份</view>
					<picker class="picker-box" mode="selector" :range="shenfenList" range-key="mingcheng"
						@change="shenfenPickerChange" :value="diquValue">
						<view class="picker">
							<view>{{ !userInfo.shenfen ? '下拉选择' :  userInfo.shenfen}}</view>

						</view>
					</picker>
					<image class="icon" src="../../static/2.png"></image>
				</view>
				<view class="li">
					<view class="lable">姓名</view>
					<input type="text" v-model="userInfo.xingming" placeholder="请输入姓名" />
				</view>
				<view class="li">
					<view class="lable">手机号</view>
					<input type="number" v-model="userInfo.tel" placeholder="请输入手机号" />
				</view>
				<view class="li">
					<view class="lable">密码</view>
					<input type="password" v-model="userInfo.password" placeholder="请输入密码" />
				</view>

				<!-- <view class="li">
					<view class="lable">验证码</view>
					<input type="number" v-model="code" placeholder="请输入验证码" />
					<view class="btn-phone" v-if="showButton" @click="sendCode">获取验证码</view>
					<view class="btn-phone" style="color: #999;" v-if="!showButton">{{countTime}}S后重新获取</view>
				</view> -->
			</view>
			<!-- <view class="xieyi">
			  <checkbox class="check" :checked="checked" @change="onCheckAllChange" label=""></checkbox>
			  点击阅读并同意<span>《服务开展协议》</span>和<span>《隐私协议》</span>
			</view> -->
			<button class="btn login" @click="startRegist">保存</button>
			<!-- 	<button class="btn register">注册</button> -->
		</view>
	</view>
</template>

<script>
	import {
		getUser,
		edictUser,
		dropdownxuanxiang
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				userInfo: {
					// 地区
					diqu: '',
					// 姓名
					xingming: '',
					// 公司名
					gongsiming: '',
					// 身份
					shenfen: '',
					// 验证码
					code: '',
					// 手机号
					tel: '',
					// 密码
					password: '',
				},

				password_1: '',
				value: 0,
				showButton: true,
				countTime: 60,
				timer: null,
				checked: true,
				diquList: [],
				shenfenList: [],
				index: -1,
				diquValue: '',
				shenfenValue: '',
				userInfo: '',

			}
		},
		onLoad() {
			// 获取地区
			this.getdiqu()
			// 获取身份
			this.getshenfen()
			// 获取
			this.getUser()
		},
		methods: {

			chooseAndUploadImage() {
				let that = this
				uni.chooseImage({
					count: 1, // 默认9, 设置图片的数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'https://www.renhexinxi.cn/front_end/api/upload_image/', // 这里填写你的上传图片的API地址
							filePath: tempFilePaths[0],
							name: 'image', // 这里根据API的要求来，可能是file或其他
							formData: {
								'user': 'test' // 其他要上传的参数
							},
							success: (uploadFileRes) => {
								console.log('图片上传成功', uploadFileRes);
								const result = JSON.parse(uploadFileRes.data) // 成功回调返回结果
								console.log('成功回调返回结果', result)
								that.userInfo.img = result.url
							},
							fail: (uploadFileErr) => {
								console.error('图片上传失败', uploadFileErr);
							}
						});
						uploadTask.onProgressUpdate((res) => {
							console.log('上传进度' + res.progress + '%');
						});
					},
					fail: (chooseImageErr) => {
						console.error('选择图片失败', chooseImageErr);
					}
				});
			},

			// 获取地区
			async getdiqu() {
				let that = this
				let data = {
					dropdownxuanxiang: 1
				}
				let res = await dropdownxuanxiang(data);
				console.log('获取地区', res);
				that.diquList = res.results
			},
			// 获取身份
			async getshenfen() {
				let that = this
				let data = {
					dropdownxuanxiang: 2
				}
				let res = await dropdownxuanxiang(data);
				that.shenfenList = res.results
				console.log('获取身份', that.shenfenList);
			},

			async getUser() {
				let that = this
				let data = {
					user_id: uni.getStorageSync('userInfo').user_id
				}
				let res = await getUser(data);
				console.log('个人中心', res)
				that.userInfo = res.results[0]


			},

			// 开始注册
			async startRegist() {
				let that = this
				if (!that.userInfo.diqu) {
					uni.showToast({
						title: '请选择地区',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.xingming) {
					uni.showToast({
						title: '请输入姓名',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.gongsiming) {
					uni.showToast({
						title: '请输入公司名',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.tel) {
					uni.showToast({
						title: '请输入手机号',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				// if(!that.userInfo.code){
				// 	uni.showToast({
				// 		title:'请输入验证码',
				// 		duration: 2000,
				// 		icon:'none'
				// 	})
				// 	return
				// }

				if (that.userInfo.password == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				// if(that.password_1 == ''){
				// 	uni.showToast({
				// 		title:'请确认密码',
				// 		duration: 2000,
				// 		icon:'none'
				// 	})
				// 	return
				// }
				// if(that.password != that.password_1){
				// 	uni.showToast({
				// 		title:'两次密码不一致！',
				// 		duration: 2000,
				// 		icon:'none'
				// 	})
				// 	return
				// }

				let data = that.userInfo
				let res = await edictUser(data, uni.getStorageSync('userInfo').user_id);

				console.log('修改状态', data);
				uni.showToast({
					title: res.msg,
					duration: 2000,
				})
				uni.reLaunch({
					url: '/pages/mine/index'
				})
			},

			goback() {
				uni.navigateBack()
			},

			// 地区选择
			diquPickerChange(e) {
				console.log('地区选择', e)
				this.diquValue = this.diquList[e.detail.value]
				this.userInfo.diqu = this.diquList[e.detail.value].mingcheng

			},
			// 身份选择
			shenfenPickerChange(e) {
				console.log('身份选择', e)
				this.shenfenValue = this.shenfenList[e.detail.value]
				this.userInfo.shenfen = this.shenfenList[e.detail.value].mingcheng
			},

			// 协议选择事件
			onCheckAllChange(e) {
				console.log(e)
			},
			clearIcon: function() {
				this.inputClearValue = '';
				this.showClearIcon = false;
			},
			async sendCode() {
				let that = this
				let data = {
					tel: that.tel,
					ctypes: 1
				}
				let res = await sendmes(data);

				if (res.code == 0) {
					that.countDown()
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}

				that.countDown()
			},

			countDown() {
				let that = this
				clearInterval(that.timer)
				that.timer = null
				that.timer = setInterval(() => {
					let time = that.countTime
					time = time - 1
					that.countTime = time
					if (time == 0) {
						that.showButton = true
						that.countTime = 60
						clearInterval(that.timer)
						that.timer = null
					} else {
						that.showButton = false

					}
				}, 1000)

			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.back {
		display: flex;
		align-items: center;
		position: absolute;
		left: 40rpx;
		top: 80rpx;
		font-size: 33rpx;
	}

	.back image {
		width: 18rpx;
		height: 36rpx;
	}

	.back view {
		margin-left: 16rpx;
	}

	/*#ifdef MP-WEIXIN*/
	.back {
		display: flex;
		align-items: center;
		position: absolute;
		left: 40rpx;
		font-size: 33rpx;
		top: 120rpx;
	}

	/*#endif*/

	.content {
		padding-bottom: 100rpx;

	}

	.topCon {
		/* 		height: 800rpx; */
		background-image: linear-gradient(to bottom, #267DAC, #C8EAFD, #fff);
		padding-top: 100rpx;
	}

	.topCon .title {
		width: 80%;
		margin: auto;
		font-size: 26px;
		font-weight: bold;
		padding-top: 200rpx;
	}

	.topCon .con {
		width: 88%;
		margin: auto;
		padding-top: 100rpx;
		font-size: 13px;
	}

	.topCon .con .headImg {
		width: 160rpx;
		height: 160rpx;
		border-radius: 160rpx;
		display: block;
		margin: auto;
		margin-bottom: 100rpx;
	}

	.topCon .con .li {
		width: 100%;
		height: 140rpx;
		position: relative;
		background: url('../../static/1.png');
		background-size: 100% 100%;
		margin-top: 20rpx;
		/* background-color: white; */
	}

	.topCon .con .li .lable {
		position: absolute;
		top: -30rpx;
		left: 30rpx;
	}

	.topCon .con .li input {
		width: 70%;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 23rpx;
		font-size: 13px;
		float: left;
		margin-left: 40rpx;
	}

	.topCon .con .li .btn-phone {
		position: absolute;
		right: 60rpx;
		bottom: 60rpx;
		color: #008BDE;

	}

	.picker-box {
		width: 86%;
		height: 80rpx;
		margin: auto;
		margin-top: 26rpx;
		float: left;
		margin-left: 40rpx;
	}

	.picker-box .picker {
		height: 100%;
	}

	.picker-box view {
		height: 80rpx;
		line-height: 80rpx;
	}

	.picker-box .value1 {
		color: #999;
	}

	.topCon .con .li .icon {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 10%;
		top: 31%;
	}

	.xieyi {
		width: 80%;
		margin: auto;
		font-size: 24rpx;
		margin-top: 20rpx;

	}

	.xieyi checkbox {
		transform: scale(0.7)
	}

	.xieyi span {
		color: #008BDE;
	}

	.btn {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		color: white;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;
	}

	.login {
		margin-top: 100rpx;
	}

	.register {
		background-color: #fff;
		color: #008BDE;
		border: 1rpx solid #008BDE;
	}
</style>